{extend name="layout/base"}

{block name="content"}
<div>   
    <table id="demo" lay-filter="test"></table>
    <div id="add" style="display: none;padding: 15px;">
        <form class="layui-form" lay-filter="form1">
            <div class="layui-form-item">
                <label class="layui-form-label">卡类型</label>
                <div class="layui-input-inline" style="width: 220px;">
                    <select name="cardtype" lay-verify="">
                        {volist name="cardscate" id="vo"}
                        <option value="{$vo.cc_id}">{$vo.cc_title}</option>
                        {/volist}
                    </select>  
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">数量</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="cardnumber" class="layui-input" lay-verify="number">
                </div>
                <div class="layui-form-mid layui-word-aux">请输入1-30的数字</div>
            </div>
            <div class="layui-form-item">
              <div  style="text-align: center;">
                <button class="layui-btn" lay-submit lay-filter="submitadd">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>
    </div>
</div>
<script type="text/html" id="headerBal">
    <a lay-event="add" class="layui-btn layui-btn-primary">添加</a>
</script>
<script type="text/html" id="barDemo">
    {{# if(d.status == 5){  }}      
        <input type="checkbox" name="status" lay-skin="switch"  lay-text="开启|停用"  value= {{ d.cardid}}  lay-filter="status" >
    {{# }else{ }}         
        <input type="checkbox" name="status" lay-skin="switch" checked lay-text="开启|停用"  value= {{ d.cardid}}  lay-filter="status" >
    {{# } }}
</script>

<script type="text/html" id="stauts">
    {{# switch(d.status) {
    case -1: }}
    <span class="layui-btn layui-btn-primary layui-btn-xs">未分配</span>
    {{# break;
    case 1: }}
    <span class="layui-btn layui-btn-warm layui-btn-xs">已分配</span>
    {{# break;
    case 2: }}
    <span class="layui-btn layui-btn-normal layui-btn-xs">已生效</span>
    {{# break;
    case 3: }}
    <span class="layui-btn layui-btn-danger layui-btn-xs">已过期</span>
    {{# break;
    case 4: }}
    <span class="layui-btn layui-btn-danger layui-btn-xs">暂停使用</span>
    {{# break;
    case 5: }}
    <span class="layui-btn layui-btn-disabled layui-btn-xs">已永久停用</span>
    {{# break;
    default: }}
    未知
    {{# break;
    } }}
</script>
<script>
layui.use(['jquery', 'table','form','laydate'], function () {
    var $ = layui.jquery,
        table = layui.table,
        form = layui.form,
        laydate = layui.laydate;
    
    var cardlist = table.render({
        elem: '#demo',
        url: 'lists',
        toolbar: '#headerBal',
        page: true, 
        cols: [[ 
        {field: 'cardid', title: 'ID'},
        {field: 'cate_title', title: '类型名称'},
        {field: 'card_no', title: '卡号'},
        {field: 'price', title: '年费（元）',templet:function(d){return d.price/100}},
         {field: 'memname', title: '会员名',templet:function (d) {
                 if(d.memname==null) return  '无';
                 return d.memname;
             }} ,
        {field: 'term', title: '有效期（月）'},
        {field: 'use_time', title: '开通时间',templet:function (d) {
                var vv =new  Date(d.use_time*1000);
                vv.setMonth(vv.getMonth()+1)
                return vv.getFullYear()+"年"+vv.getMonth()+"月"+vv.getDate()+"日"
            }},
            {field: 'end_time ', title: '到期日期',templet:function (d) {
                    var v =new  Date(d.use_time*1000);
                    var t = new Date(v.getFullYear(), v.getMonth(), v.getDate());
                    t.setMonth(v.getMonth() + d.term+1);
                    return t.getFullYear()+"年"+t.getMonth()+"月"+t.getDate()+"日"
                }},
         {field: 'status', title: '状态',templet:'#stauts'},
        {field:'done',title:'操作',align:'center', toolbar: '#barDemo'}
        ]]
    });
    //监听头部工具栏
    var index1
    table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
            case 'add':
            index1 = layer.open({
                type: 1,
                area: ['450px','auto'],
                content:$('#add')
            });
            break;
        };
    });
    //监听工具条 
    table.on('tool(test)', function(obj){
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        
        if(layEvent === 'stop'){ 
            layer.confirm('确定暂停此卡吗', function(index){
               $.ajax({
                   url:'',
                   data:"",
                   type:'post',
                   success:function(){
                    cardlist.reload()
                   },
                   error:function(){

                   }
                   
               })
                layer.close(index);
                
            });
        }
    }); 
    //有效期实例化
    laydate.render({
        elem: '#validitytime',
        range: true,
        done: function(value, date, endDate){
            console.log(value); //得到日期生成的值，如：2017-08-18
            console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
            console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            $("input[name='validitytime']").val(value)
        }
    });
    //生日实例化
    laydate.render({
        elem: '#birthday',
        type: 'date',
        done: function(value, date, endDate){
            console.log(value);
            console.log(date);
            $("input[name='birthday']").val(value) 
        }
    });
    form.verify({
        number: [
        /^[0-9]$|^[0-2][0-9]$|^3[0]$/,'只能输入1-30的数字'
        ] 
    });  
    //监听添加会员提交
    form.on('submit(submitadd)', function(data){
        $.ajax({
            type:'post',
            data:{
                num:data.field.cardnumber,
                cc_id: data.field.cardtype
            },
            url:'/manager/cards/buildcards',
            success:function(res){
                if(res.code == 0){
                    cardlist.reload()
                    layer.close(index1)
                }else{
                    console.log(res.msg)
                }
                
            }
        })
        return false; 
    }); 
    form.on('switch(status)', function(data){
        $.ajax({
            url:'setCardStatus',
            type:'post',
            data:{
                cardid:data.value
            },
            success:function(res){
                if(res.code == 0){
                    layer.msg(res.msg)
                }
            }
        })
    });    
}) 
</script>
{/block}